<template>
  <div class="home">
    <div class="vanbar">
      <van-nav-bar title="单词"/>
      <!-- 内容区域 -->
      <!-- 搜索内容 -->
      <van-search
      v-model="searchInput"
      placeholder="请输入搜索的关键字母"
      @search="searchCategoryByName"/>
      <!-- 添加按钮 -->
      <div class="btn">
        <van-button type="info" size="small" plain @click="Add">添加单词</van-button>
        <van-button type="danger" size="small" plain @click="reset" style="margin-left:10px">重置搜索</van-button>
        <!-- <div style="text-align:center;display:inline-block">
          单词意译:
          <van-switch v-model="checked" size="24px"/>
        </div> -->
      </div>
    </div>
    
    <!-- 显示单词 -->
    <div style="padding-top:160px">
      <van-cell-group v-for="w in words" :key="w.id">
        <van-cell center>
          <template #title>
            <span class="custom-title">{{w.word}}</span>
            <!-- <van-tag type="danger">标签</van-tag> -->
          </template>
          <template #label v-if="checked">
            <span>{{w.mean1}}</span><span v-if="w.mean2">,{{w.mean2}}</span>
          </template>
          <template #right-icon>
            <van-button type="info" size="mini" @click="EditW(w)">编辑</van-button>
            <van-button type="danger" size="mini" @click="DeleteW(w)">删除</van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
    
    <!-- 添加单词的dialog -->
    <van-popup class="dialog" position="bottom" round v-model="show"
    closeable :style="{height:'50%'}">
      <!-- dialog标题 -->
      <div class="dialogtitle">{{title}}</div>
      <!-- dialog表单，填写单词和意思，意思1为空时意思2被隐藏，单词至少有一个意思 -->
      <van-form v-model="form" @submit="updataWord">
        <van-field class="Text" v-model="form.word" label="单词" placeholder="单词拼写"
          :rules="[{ validator, message: '请输入正确的单词' }]"/>
        <van-field class="Text" v-model="form.mean1" label="意思一" placeholder="单词意思"
          :rules="[{ required: true, message: '请填写单词的意思' }]"/>
        <van-field class="Text" v-if="form.mean1!=null&&form.mean1!=''" v-model="form.mean2" label="意思二" placeholder="单词意思"/>
        <!-- 添加按钮，对填写的单词进行存储 -->
        <van-button class="dialogbtn" round type="info" >{{title}}</van-button>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import axios from '../../http/axios'
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
  data(){
    return {
      show: false,    // 管理模态框的开关
      words:[],   //存储接口返回的单词信息
      form:{},    //存储表单填写的信息
      title:'', //弹出框标题
      searchInput: "",  // 搜索框的内容
      checked:true, //是否显示意译
    }
  },
  created(){
      // 进入页面先读取所有单词信息
      this.findAll();
  },
  methods:{
    // 查询所有单词
    findAll(){
      axios.get('/word/findAll').then((res)=>{
        this.words = res.data
          console.log(res);
      })
    },
    // 添加单词调用的方法
    updataWord(){
      let data = {
        id:this.form.id,
        word:this.form.word,
        mean1:this.form.mean1,
        mean2:this.form.mean2
      }
      axios.post('/word/saveOrUpdate',data).then((res)=>{
        if(res.data.code == 200){
          Toast.success(res.data.message);
          this.form = {}
          this.findAll();
          this.show = false;
        }
      })
    },
    // 打开添加单词的模态框
    Add(){
      this.title = '添加单词'
      this.form = {}
      this.show=true;
    },
    EditW(row){
      this.title = '编辑单词'
      this.form = {...row}
      this.show=true;
    },
    DeleteW(row){
      Dialog.confirm({
        title: '是否删除'+row.word,
        message: '该操作会永久删除此单词',
      })
      .then(() => {
        // on confirm
        axios.get('/word/deleteById?id='+row.id).then((res)=>{
          if(res.data.code == 200){
            Toast.success(res.data.message);
            this.findAll();
          }
        })
      })
      .catch(() => {
        // on cancel
      });
      
    },
    // 搜索调用的方法
    searchCategoryByName() {
      // 配置参数
      let params = {
        word: this.searchInput,
      };
      if (params.word == "") {
        this.findAll();
      } else {
        axios.get('/word/findByWord',{params:params}).then((res)=>{
          this.words = res.data
        })
      }
    },
    reset() {
      this.searchInput = ''
      this.searchCategoryByName()
    },
    validator() {
      if( this.form.word == '' || this.form.word==null ){
        return false
      }else{
        return /^[A-Za-z- ]+$/.test(this.form.word);
      }
    },
  }
}
</script>
<style scoped>
.home {
  padding-bottom: 50px;
}
.vanbar{
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #eeeeee;
}
.btn{
  padding: 10px;
}

.dialogtitle{
  font-size: 18px;
  text-align: center;
  padding-top: 16px;
  padding-bottom: 16px;
}
.Text{
  padding-top: 16px;
}
.dialogbtn{
  width: 90%;
  position: fixed;
  bottom: 16px;
  left: 5%;
}
</style>